<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script> 

</head>

<!-- 几个注意点:
1.关于组件名:
个单词组成:
第一种写法(首字母小写): school
第二种写法(首字母大写): School多个单词组成:
第一种写法(kebab-case命名): my-school
第二种写法(Camelcase命名): MySchool (需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称，例如: h2、H2都不行。
(2).可以使用name配置项指定组件有开发者工具中呈现的名字。
2.关于组件标签:
第一种写法:<school></schoo1>
第二种写法:<school/>
备注:不用使用脚手架时，<school/>会导致后续组件不能渲染
<school></school>
3.一个简写方式:
const school = Vue.extend(options) 可简写为: const school = options -->


<body>
    <div id="root">
        <!-- 第三步 引用 -->
        <my-school></my-school>
        <hr>
	    <my-school></my-school>
		<student>
    </div>
   
</body>

<script type="text/javascript">
   Vue.config.productionTip=false;
 
   
   //第一步创建
   let school = {
    name:'school',
    template:`
    <div>
        <h1> 名称:{{schoolName}}</h1>
        <h1>地址:{{address}}</h1>
    </div>
    `,
    data() {
        return {
            schoolName:'清华',
            address: '北京'
        }
    }
   }

   let student = {
    template:`
    <div>
        <h1> 名称:{{name}}</h1>
        <h1>年龄:{{age}}</h1>
    </div>
    `,
    data() {
        return {
            name:'JJ',
            age: 18
        }
    }
   }


    new Vue({
        el:"#root",
        data:{
            opacity:1
        }, 
        //第二步 注册
        components:{
            'my-school':school,student
        }
        
    })
 
   
</script>
</html>